<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Absolute Centering with Flexbox</title>  
<style>  
  .container {  
    display: flex;  
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中 */  
    height: 100vh; /* 使容器高度占满视口 */  
    border: 1px solid #000; /* 可视化边框 */  
    background-color: lightblue;
  }  
  .item {  
    background-color: lightcoral;  
    padding: 20px;  
  }  
</style>  
</head>  
<body>  
  
<div class="container">  
  <div class="item">I am absolutely centered!</div>  
</div>  
  
</body>  
</html>